<template>
  <div class="icon">
    <span class="play"></span>
    <div class="playicon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.icon {
    width: 100vw;
    height: 80vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999;
  span {
    display: none;
  }
  .playicon {
    display: flex;
    justify-content: space-between;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    span {
      width: 12%;
      height: 100%;
      background-color: #d43c33;
      display: inline-block;
      animation: loading 0.6s linear infinite alternate;
      transform-origin: bottom;

      animation-play-state: running;
      &:nth-child(1) {
        animation-delay: -0.4s;
      }
      &:nth-child(2) {
        animation-delay: -0.6s;
      }
      &:nth-child(3) {
        animation-delay: -0.2s;
      }
      &:nth-child(4) {
        animation-delay: 0s;
      }
    }
  }
}
@keyframes loading {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0);
  }
}
</style>